<template>
  <el-card>
    <el-button type="primary" round>下载歌词</el-button>
    <el-button type="danger" round>清除文件</el-button>
  </el-card>
  <el-card header="设置">
    <el-form label-position="top" :model="setting">
      <el-form-item label="保存目录">
        <el-radio-group v-model="setting.pathType">
          <el-radio label="origin">音乐文件相同目录</el-radio>
          <el-radio label="custom">自定义目录</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自定义保存目录" v-if="setting.pathType === 'custom'">
        <el-input :model-value="setting.path" readonly placeholder="选择保存歌词的文件夹" @click="handlePathClick"></el-input>
      </el-form-item>
      <div>
        <el-button type="primary" @click="handleSave" round>保存</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import {setting, save} from "../uses/useConfig";
import {ElNotification} from "element-plus";

const remote = window.remote;

const handlePathClick = () => {
  const [path] = remote.showOpenDialogSync({
    title: '选择歌词存储目录',
    buttonLabel: '选择',
    message: '请选择要存放歌词的目录',
    properties: ['openDirectory']
  }) || [setting.path];
  setting.path = path;
};

const handleSave = () => {
  save();

  ElNotification.success({
    title: '提示',
    message: '保存成功',
    duration: 1500,
  })
}
</script>

<style scoped lang="scss">
.el-card {
  margin-bottom: 5px;

  :deep(.el-card__header) {
    padding: 10px;
  }

  :deep(.el-card__body) {
    padding: 10px;
  }
}
</style>
